<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- 单一引入 -->
	<!-- 
	<div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
    </script>
	<script type="text/javascript" src="/echarts/WebContent/echarts-2.2.7/build/dist/echarts.js"></script>
	 -->
	  <script src="js/echarts.js"></script>
	<div id="main" style="height: 400px;"></div>
</head>
<body>
   <script type="text/javascript">
   require.config({
       paths: {
           echarts: './js'
       }
   });
   
   // Step:4 require echarts and use it in the callback.
   // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
   
   
   
   require(
       [
           'echarts',
           'echarts/chart/bar',
           'echarts/chart/line',
           'echarts/chart/map'
       ],
      
       function (ec) {
           //--- 折柱 ---
           var myChart = ec.init(document.getElementById('main'),'infographic');//infographic,macarons 内置主题
           var option ={
                   tooltip : {                               //提示
                       trigger: 'axis'
                   },
                   legend: {                                  //图标颜色说明表
                       data:['蒸发量','降水量']             
                   },
                  timeline:{
                	show:true,
                  },
                   toolbox: {
                       show : true,								  //是否显示工具箱，所有的true为显示，false为隐藏。		
                       feature : {								//工具箱子菜单设置
                    	   mark : {show: true},								//mark 标志，辅助线开关										
                           dataView : {show: true, readOnly: false},          //readOnly 为false刷新按钮
                           magicType : {show: true, type: ['line', 'bar']},  //图像切换
                           restore : {show: true},         //还原按钮
                           saveAsImage : {show: true}     //是否保存为图片按钮
                       }
                   },
                   calculable : false,					//默认为false， 是否需要拖拽					
                   animation :true,						//是否启用动画
                   xAxis : [                            //x坐标
                       {
                           type : 'category',
                           data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                       }
                   ],
                   yAxis : [                            //y坐标
                       {
                           type : 'value',
                           splitArea : {show : true}           //分离显示	
                       }
                   ],
                   series : [                               //统计的数据，数组
                       {
                           name:'蒸发量',                     
                           type:'bar',
                           data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                       },
                       {
                           name:'降水量',
                           type:'bar',
                           data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                       }
                   ]
               };
          	 myChart.setOption(option);
           }
       );
  
   </script>
   
   
   
</body>
</html>